<template>
  <el-collapse v-model="activeName" accordion class="com-style">
    <el-collapse-item v-for="item in posts" :key="item.id" :title=item.title :name="item.id">
      <div>{{item.body}}</div>
    </el-collapse-item>
  </el-collapse>
</template>
<script>
  export default {
    name: 'collapse',
    props: ["posts"],
    data() {
      return {
        activeName: '1'
      };
    }
  };
</script>
<style>
  .com-style{
    overflow-x: hidden;
    text-align: left;
  }
  .el-collapse-item__header {
    background-color: lightblue;
    height: 48px;
    line-height: 48px;
    color: #303133;
    cursor: pointer;
    border-bottom: 1px solid #ebeef5;
    font-size: 13px;
    font-weight: 500;
    -webkit-transition: border-bottom-color .3s;
    transition: border-bottom-color .3s;
    outline: 0;
  }
</style>
